<template>
    <div class="console-page api-info">
        <el-tabs tab-position="left" style="height: 100%" type="border-card" v-model="activeTab">
            <el-tab-pane label="文档" name="document">
                <document />
            </el-tab-pane>
            <el-tab-pane label="调试" name="debug">
                <debug />
            </el-tab-pane>
        </el-tabs>


    </div>
</template>

<script setup>
import document from '@/components/apiInfo/document'
import debug from '@/components/apiInfo/debug'
import { useTabPaneAnimation } from "@usehook"

let activeTab = $ref("document")
useTabPaneAnimation(() => activeTab)
</script>

<style>
.api-info .el-tabs__item {
    min-width: 120px;
}

.api-info .el-tabs__content {
    height: 100%;
}

.api-info .el-tabs--left .el-tabs__item.is-left,
.api-info .el-tabs--right .el-tabs__item.is-left {
    justify-content: center;
}
</style>